<template>
    <div>
        <el-row :gutter="20" style="line-height:30px">
            <el-col :span="24">
                <div class="floatMessage">欢迎你进入个人信息页面查看个人信息，用户的评分将会影响到你的个人信誉积分，请注意查看你的个人信誉积分，低于80分会限制你的正常接单</div>
            </el-col>
        </el-row>
        <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="备注">
                <el-tag size="small">骑手</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="用户名">{{formdata.username}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{formdata.phone}}</el-descriptions-item>
            <el-descriptions-item label="账号" :span="1">{{formdata.account}}</el-descriptions-item>
            <el-descriptions-item label="性别" :span="1">{{formdata.sexChinese}}</el-descriptions-item>
            <el-descriptions-item label="身份证信息">{{formdata.idNumber}}</el-descriptions-item>
            <el-descriptions-item label="日配送量">{{formdata.dayTradeVolume}}单</el-descriptions-item>
            <el-descriptions-item label="日收益">{{formdata.dayTradeVolume*2.5}}元</el-descriptions-item>
            <el-descriptions-item label="月配送量">{{formdata.monthTradeVolume}}单</el-descriptions-item>
            <el-descriptions-item label="月收益">{{formdata.monthTradeVolume*2.5}}元</el-descriptions-item>
            <el-descriptions-item label="年配送量">{{formdata.yearTradeVolume}}单</el-descriptions-item>
            <el-descriptions-item label="年收益">{{formdata.yearTradeVolume*2.5}}元</el-descriptions-item>
            <el-descriptions-item label="账号创建时间" :span="2">{{formdata.createTime}}</el-descriptions-item>
            <el-descriptions-item label="最近信息更新时间" :span="2">{{formdata.updateTime}}</el-descriptions-item>
            <el-descriptions-item label="个人信息修改" :span="4">
                <router-link to="/employee/ownInfo/updateEmployeeInfo"><el-button icon="el-icon-s-open" @click="changeInfo">点击</el-button></router-link>
            </el-descriptions-item>
        </el-descriptions>
        <el-dialog title="修改提示" :visible.sync="centerDialogVisible" width="30%" center style="line-height: 20px;">
            <router-view :account = "formdata.account" :phone = "formdata.phone" :username="formdata.username" @change="getState"></router-view>
        </el-dialog>
    </div>
</template>
<script>
import { getEmployeeInfo } from '@/utils/modules/employee.js'
export default {
    mounted() {
        this.init()
    },
    data() {
        return {
            formdata: {

            },
            centerDialogVisible:false
        }
    },
    methods: {
        init() {
            let timer = setInterval(() => {
                let floatMessage = document.querySelector('.floatMessage')
                let content = floatMessage.innerHTML
                let sta = content.substring(0, content.length - 1)
                let end = content.substring(content.length - 1, content.length)
                floatMessage.innerHTML = end + sta
            }, 1000)
            getEmployeeInfo().then(res => {
                this.formdata = res.data
                console.log(this.formdata)
                if (this.formdata.sex == 1) {
                    this.formdata.sexChinese = '男'
                } else {
                    this.formdata.seeChinese = '女'
                }
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        changeInfo() {
            this.centerDialogVisible = true
        },
        getState(val){
            this.centerDialogVisible = val
            this.$router.go(0)
        }
    }
}
</script>
<style>
.floatMessage {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
    color: green;
    height: 40px;
    border-top: 2px solid rgb(89, 89, 56);
    border-bottom: 2px solid rgb(89, 89, 56);
    line-height: 40px;
}
</style>